<template>
  <div class="common-layout linear-gradient">
    <top-menu :data="drawerData" style="height: 30px !important" />
    <el-container style="margin-top: -30px">
      <el-header class="header-container">
        <div class="headerTitle">查询条件</div>
        <div class="header-content">
          <el-form :model="headerSearchForm" label-width="auto" class="header-search-form">
            <el-form-item label="产线">
              <el-input v-model="headerSearchForm.productionLine" placeholder="请输入产线" />
            </el-form-item>
            <el-form-item label="原卷号">
              <el-input v-model="headerSearchForm.entId" placeholder="请输入卷号" />
            </el-form-item>
            <el-form-item label="销售合同编号">
              <el-input v-model="headerSearchForm.orderNo" placeholder="请输入销售合同编号" />
            </el-form-item>
            <el-form-item label="钢种类型">
              <el-input v-model="headerSearchForm.steelGrade" placeholder="请输入钢种类型" />
            </el-form-item>
          </el-form>
          <div class="header-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleAdd">添加</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="table-container-main">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="serialNumber" label="序号" fixed="left">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="entId" label="卷号" />
            <el-table-column prop="orderNo" label="销售合同编号" />
            <el-table-column prop="productLine" label="产线" />
            <el-table-column prop="orderUnitWTMin" label="订单允许的最小单件重量" />
            <el-table-column prop="orderUnitWTMax" label="订单允许的最大单件重量" />
            <el-table-column prop="inMaxWt" label="入口材料重量" />
            <el-table-column prop="yieldRate" label="成材率" />
            <el-table-column prop="slitNum" label="分卷数量" />
            <el-table-column prop="slitWeight" label="单卷分切重量" />
            <el-table-column prop="wtMisMatchFlag" label="重量不符标识" />
            <el-table-column prop="reason" label="重量不符原因描述" />
            <el-table-column prop="createTime" label="记录创建时间" />
            <el-table-column prop="LossWeight" label="分切损耗重量" />
            <el-table-column prop="steelGrade" label="钢种类型" />
            <el-table-column prop="inMaxThick" label="入口材料厚度" />
            <el-table-column prop="inMatWidth" label="入口材料宽度" />
            <el-table-column prop="inMatLen" label="入口材料长度" />
            <el-table-column prop="outMatLen" label="出口材料长度" />
            <el-table-column prop="outMatWidth" label="出口材料宽度" />
            <el-table-column prop="outMatThick" label="出口材料厚度" />
            <el-table-column label="操作" fixed="right" width="200">
              <template #default="scope">
                <el-button type="warning" @click="handleEdit(scope.row)">修改</el-button>
                <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>

  <el-dialog v-model="dialogVisible" :title="dialogTitle" :before-close="handleClose" ref="dialogRef" @closed="cancel">
    <el-form :model="dialogForm" label-width="auto">
      <el-form-item label="卷号">
        <el-input v-model="dialogForm.entId" placeholder="请输入卷号" disabled />
      </el-form-item>
      <el-form-item label="销售合同编号">
        <el-input v-model="dialogForm.orderNo" placeholder="请输入销售合同编号" disabled />
      </el-form-item>
      <el-form-item label="产线">
        <el-input v-model="dialogForm.productLine" placeholder="请输入产线" disabled />
      </el-form-item>
      <el-form-item label="订单允许的最小单件重量">
        <el-input v-model="dialogForm.orderUnitWTMin" placeholder="请输入订单允许的最小单件重量" />
      </el-form-item>
      <el-form-item label="订单允许的最大单件重量">
        <el-input v-model="dialogForm.orderUnitWTMax" placeholder="请输入订单允许的最大单件重量" />
      </el-form-item>
      <el-form-item label="入口材料重量">
        <el-input v-model="dialogForm.inMaxWt" placeholder="请输入入口材料重量" />
      </el-form-item>
      <el-form-item label="成材率">
        <el-input v-model="dialogForm.yieldRate" placeholder="请输入成材率" />
      </el-form-item>
      <el-form-item label="分卷数量">
        <el-input v-model="dialogForm.slitNum" placeholder="请输入分卷数量" />
      </el-form-item>
      <el-form-item label="单卷分切重量">
        <el-input v-model="dialogForm.slitWeight" placeholder="请输入单卷分切重量" />
      </el-form-item>
      <el-form-item label="重量不符标识">
        <el-input v-model="dialogForm.wtMisMatchFlag" placeholder="请输入重量不符标识" />
      </el-form-item>
      <el-form-item label="重量不符原因描述">
        <el-input v-model="dialogForm.reason" placeholder="请输入重量不符原因描述" />
      </el-form-item>
      <el-form-item label="记录创建时间">
        <el-input v-model="dialogForm.createTime" placeholder="请输入记录创建时间" />
      </el-form-item>
      <el-form-item label="分切损耗重量">
        <el-input v-model="dialogForm.LossWeight" placeholder="请输入分切损耗重量" />
      </el-form-item>
      <el-form-item label="钢种类型">
        <el-input v-model="dialogForm.steelGrade" placeholder="请输入钢种类型" />
      </el-form-item>
      <el-form-item label="入口材料厚度">
        <el-input v-model="dialogForm.inMaxThick" placeholder="请输入入口材料厚度" />
      </el-form-item>
      <el-form-item label="入口材料宽度">
        <el-input v-model="dialogForm.inMatWidth" placeholder="请输入入口材料宽度" />
      </el-form-item>
      <el-form-item label="入口材料长度">
        <el-input v-model="dialogForm.inMatLen" placeholder="请输入入口材料长度" />
      </el-form-item>
      <el-form-item label="出口材料长度">
        <el-input v-model="dialogForm.outMatLen" placeholder="请输入出口材料长度" />
      </el-form-item>
      <el-form-item label="出口材料宽度">
        <el-input v-model="dialogForm.outMatWidth" placeholder="请输入出口材料宽度" />
      </el-form-item>
      <el-form-item label="出口材料厚度">
        <el-input v-model="dialogForm.outMatThick" placeholder="请输入出口材料厚度" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="dialogFormSubmit"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts">
  import { ref, reactive, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import '../steelCoilServiceModel/steelCoilServiceModelCommonStyle.less';
  import { api } from '/@/api/VolumeDivisionOptimization/index';

  interface SearchForm {
    productionLine: string;
    entId: string;
    orderNo: string;
    steelGrade: string;
  }

  export default defineComponent({
    name: 'DataDictionary',
    setup() {
      // 表单数据
      const headerSearchForm = reactive<SearchForm>({
        productionLine: '',
        entId: '',
        orderNo: '',
        steelGrade: '',
      });

      const drawerData = ref([
        { name: '全流程重量不符追溯分析', url: '/yiledAndSubsection/DefectYieldAnalysis' },
        { name: '历史卷重不符统计及优化建议', url: '/volumeDivisionOptimization/index' },
        { name: '生产计划-动态分切建议', url: '/volumeDivisionOptimization/list' },
      ]);

      // 表格数据
      const tableData = ref([
        // {
        //   indocno: 0, // 主键
        //   entId: '', // 原卷号（上游系统提供的唯一物料标识）
        //   orderNo: '', // 销售合同编号（格式示例：SO20250510-001）
        //   productLine: '', // 产线编码（取值范围：CAL1630/CAL2150/CGL1870/TCM2280）
        //   orderUnitWTMin: '', // 订单允许的最小单件重量（单位：千克，精度0.01kg）
        //   orderUnitWTMax: '', // 订单允许的最大单件重量（单位：千克，精度0.01kg）
        //   inMaxWt: '', // 入口材料重量（单位：吨，精度0.001吨=1kg）
        //   yieldRate: '', // '成材率（计算公式：(分卷重量*分卷数)/入口材料重量*100%）
        //   slitNum: '', // 分卷数量（默认值1，取值范围1-32767）
        //   slitWeight: '', // 单卷分切重量（单位：吨，精度0.001吨=1kg）
        //   wtMisMatchFlag: '', // 重量不符标识（0-正常，1-不符，需填写REASON字段）
        //   reason: '', // 重量不符原因描述（当FLAG=1时必填）
        //   createTime: '', // 记录创建时间（自动获取系统时间）
        //   LossWeight: '', // 分切损耗重量（计算公式：入口材料重量 - (分卷数量*单卷分切重量)，单位：吨，精度0.001吨=1kg）
        //   steelGrade: '', // 钢种类型
        //   inMaxThick: '', // 入口材料厚度
        //   inMatWidth: '', // 入口材料宽度
        //   inMatLen: '', // 入口材料长度
        //   outMatLen: '', // 出口材料长度
        //   outMatWidth: '', // 出口材料宽度
        //   outMatThick: '', // 出口材料厚度
        // },
        {
          indocno: 1,
          entId: 'V001',
          orderNo: 'SO20250510-001',
          productLine: 'CAL1630',
          orderUnitWTMin: '10.00',
          orderUnitWTMax: '20.00',
          inMaxWt: '1.501',
          yieldRate: '85.20%',
          slitNum: '2',
          slitWeight: '0.750',
          wtMisMatchFlag: '0',
          reason: '',
          createTime: '2025-05-10 10:00:00',
          LossWeight: '0.001',
          steelGrade: 'Q235B',
          inMaxThick: '10.00',
          inMatWidth: '2.00',
          inMatLen: '10.00',
          outMatLen: '10.00',
          outMatWidth: '2.00',
          outMatThick: '10.00',
        },
        {
          indocno: 2,
          entId: 'V002',
          orderNo: 'SO20250510-002',
          productLine: 'CAL2150',
          orderUnitWTMin: '15.00',
          orderUnitWTMax: '25.00',
          inMaxWt: '1.751',
          yieldRate: '88.30%',
          slitNum: '3',
          slitWeight: '0.583',
          wtMisMatchFlag: '1',
          reason: '重量不符',
          createTime: '2025-05-11 10:00:00',
          LossWeight: '0.002',
          steelGrade: 'Q345B',
          inMaxThick: '12.00',
          inMatWidth: '2.20',
          inMatLen: '12.00',
          outMatLen: '12.00',
          outMatWidth: '2.20',
          outMatThick: '12.00',
        },
        {
          indocno: 3,
          entId: 'V003',
          orderNo: 'SO20250510-003',
          productLine: 'CGL1870',
          orderUnitWTMin: '12.00',
          orderUnitWTMax: '22.00',
          inMaxWt: '1.601',
          yieldRate: '86.50%',
          slitNum: '2',
          slitWeight: '0.800',
          wtMisMatchFlag: '0',
          reason: '',
          createTime: '2025-05-12 10:00:00',
          LossWeight: '0.001',
          steelGrade: 'Q235B',
          inMaxThick: '11.00',
          inMatWidth: '1.90',
          inMatLen: '11.00',
          outMatLen: '11.00',
          outMatWidth: '1.90',
          outMatThick: '11.00',
        },
      ]);

      let dialogVisible = ref(false);
      let dialogTitle = ref('');

      // 分页数据
      const pagination = reactive({
        currentPage: 1,
        pageSize: 10,
        total: 1,
      });

      const dialogForm = reactive({
        indocno: 0, // 主键
        entId: '', // 原卷号（上游系统提供的唯一物料标识）
        orderNo: '', // 销售合同编号（格式示例：SO20250510-001）
        productLine: '', // 产线编码（取值范围：CAL1630/CAL2150/CGL1870/TCM2280）
        orderUnitWTMin: '', // 订单允许的最小单件重量（单位：千克，精度0.01kg）
        orderUnitWTMax: '', // 订单允许的最大单件重量（单位：千克，精度0.01kg）
        inMaxWt: '', // 入口材料重量（单位：吨，精度0.001吨=1kg）
        yieldRate: '', // '成材率（计算公式：(分卷重量*分卷数)/入口材料重量*100%）
        slitNum: '', // 分卷数量（默认值1，取值范围1-32767）
        slitWeight: '', // 单卷分切重量（单位：吨，精度0.001吨=1kg）
        wtMisMatchFlag: '', // 重量不符标识（0-正常，1-不符，需填写REASON字段）
        reason: '', // 重量不符原因描述（当FLAG=1时必填）
        createTime: '', // 记录创建时间（自动获取系统时间）
        LossWeight: '', // 分切损耗重量（计算公式：入口材料重量 - (分卷数量*单卷分切重量)，单位：吨，精度0.001吨=1kg）
        steelGrade: '', // 钢种类型
        inMaxThick: '', // 入口材料厚度
        inMatWidth: '', // 入口材料宽度
        inMatLen: '', // 入口材料长度
        outMatLen: '', // 出口材料长度
        outMatWidth: '', // 出口材料宽度
        outMatThick: '', // 出口材料厚度
      });

      const handleClose = (done: () => void) => {
        ElMessageBox.confirm('Are you sure to close this dialog?')
          .then(() => {
            done();
          })
          .catch(() => {
            // catch error
          });
      };

      const cancel = () => {
        dialogVisible.value = false;
        Object.assign(dialogForm, {
          indocno: null,
          productionLine: '',
          areaDescription: '',
          areaCode: '',
          deviceDescription: '',
          deviceCode: '',
          dicVariableName: '',
          dicVariableDescription: '',
          inDataSource: '1',
          dicVariableProperty: '',
          enable: '0',
          toc: '',
          tom: '',
        });
      };

      // TODO TOC创建时间/TOM修改时间
      const dialogFormSubmit = async () => {
        try {
          let param: any = { ...dialogForm };
          param.enable = Number.parseInt(param.enable);
          if (dialogTitle.value === '修改') {
            await api.update(param);
          } else {
            await api.add(param);
          }
        } catch (error) {
          ElMessage.error('操作数据失败');
        } finally {
          cancel();
          fetchTableData();
        }
      };

      // 窗口大小变化处理
      const handleResize = () => {
        nextTick(() => {
          // 这里可以添加表格自适应高度的逻辑
        });
      };

      // 获取表格数据
      const fetchTableData = async () => {
        try {
          const param = {
            page: {
              pageIndex: pagination.currentPage,
              pageSize: pagination.pageSize,
            },
            dto: {
              productLine: headerSearchForm.productionLine,
              entId: headerSearchForm.entId,
              orderNo: headerSearchForm.orderNo,
              steelGrade: headerSearchForm.steelGrade,
            },
          };
          const res = await api.page(param);
          tableData.value = res.data.data.records;
          pagination.total = res.data.data.total;
        } catch (error) {
          ElMessage.error('获取数据失败');
        }
      };

      // 查询方法
      const handleSearch = () => {
        pagination.currentPage = 1;
        fetchTableData();
      };

      // 重置方法
      const handleReset = () => {
        (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
          headerSearchForm[key] = '';
        });
        handleSearch();
      };

      // 添加方法
      const handleAdd = () => {
        dialogVisible.value = true;
        dialogTitle.value = '新增';
      };

      // 编辑方法
      const handleEdit = (row: any) => {
        dialogVisible.value = true;
        dialogTitle.value = '修改';
        Object.assign(dialogForm, { ...row });
      };

      // 删除方法
      const handleDelete = async (row: any) => {
        try {
          await api.delete(row.indocno);
        } catch (error) {
          ElMessage.error('删除失败');
        } finally {
          fetchTableData();
        }
      };

      // 分页大小变化
      const handleSizeChange = (val: number) => {
        pagination.pageSize = val;
        fetchTableData();
      };

      // 页码变化
      const handleCurrentChange = (val: number) => {
        pagination.currentPage = val;
        fetchTableData();
      };

      // 生命周期钩子
      onMounted(() => {
        fetchTableData();
        window.addEventListener('resize', handleResize);
      });

      onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
      });

      return {
        headerSearchForm,
        tableData,
        pagination,
        handleSearch,
        handleReset,
        handleAdd,
        handleEdit,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        dialogVisible,
        dialogTitle,
        dialogForm,
        dialogFormSubmit,
        cancel,
        handleClose,
        drawerData,
      };
    },
  });
</script>
